<template>
  <div class="d-flex justify-center flex-wrap">
    <div class="box d-flex justify-center flex-wrap mb-6">
      <div
        class="
          text
          rounded-lg
          d-flex
          justify-center
          flex-wrap flex-column
          text-h5
        "
      >
        <p>桃源乡博客</p>
        <p>分享知识和快乐的地方</p>
      </div>
      <div class="image">
        <v-img
          lazy-src="../../assets/home02.png"
          height="100%"
          width="100%"
          src="../../assets/home02.png"
        ></v-img>
      </div>
    </div>
    <div class="box mb-6">
      <v-tabs color="green lighten-4" center-active show-arrows hide-slider>
        <v-tab>
          <!-- <v-icon left> mdi-account </v-icon> -->
          <!-- hello world -->
        </v-tab>
        <!-- <v-tab>
          <v-icon left> mdi-lock </v-icon>
          Option 2
        </v-tab>
        <v-tab>
          <v-icon left> mdi-access-point </v-icon>
          Option 3
        </v-tab> -->

        <v-tab-item>
          <v-card flat>
            <v-card-text>
              <p>
                要得到你想要的某件东西，最可靠的办法是让你自己配得上它。 -- 查理・芒格
              </p>

              <p>
                那时我们有梦，关于文学，关于爱情，关于穿越世界的旅行。如今我们深夜饮酒，杯子碰到一起，都是梦破碎的声音。 -- 北岛 《波兰来客》
              </p>

              <p class="mb-0">
                满怀希望就会所向披靡。 -- 巫哲 《撒野》
              </p>
            </v-card-text>
          </v-card>
        </v-tab-item>
        <v-tab-item>
          <v-card flat>
            <v-card-text>
              <p>
                Morbi nec metus. Suspendisse faucibus, nunc et pellentesque
                egestas, lacus ante convallis tellus, vitae iaculis lacus elit
                id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum
                aliquam libero, non adipiscing dolor urna a orci. Curabitur
                ligula sapien, tincidunt non, euismod vitae, posuere imperdiet,
                leo. Nunc sed turpis.
              </p>

              <p>
                Suspendisse feugiat. Suspendisse faucibus, nunc et pellentesque
                egestas, lacus ante convallis tellus, vitae iaculis lacus elit
                id tortor. Proin viverra, ligula sit amet ultrices semper,
                ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In
                hac habitasse platea dictumst. Fusce ac felis sit amet ligula
                pharetra condimentum.
              </p>

              <p>
                Sed consequat, leo eget bibendum sodales, augue velit cursus
                nunc, quis gravida magna mi a libero. Nam commodo suscipit quam.
                In consectetuer turpis ut velit. Sed cursus turpis vitae tortor.
                Aliquam eu nunc.
              </p>

              <p>
                Etiam ut purus mattis mauris sodales aliquam. Ut varius
                tincidunt libero. Aenean viverra rhoncus pede. Duis leo. Fusce
                fermentum odio nec arcu.
              </p>

              <p class="mb-0">
                Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In
                dui magna, posuere eget, vestibulum et, tempor auctor, justo.
                Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed,
                iaculis a, condimentum nec, nisi.
              </p>
            </v-card-text>
          </v-card>
        </v-tab-item>
        <v-tab-item>
          <v-card flat>
            <v-card-text>
              <p>
                Fusce a quam. Phasellus nec sem in justo pellentesque facilisis.
                Nam eget dui. Proin viverra, ligula sit amet ultrices semper,
                ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In
                dui magna, posuere eget, vestibulum et, tempor auctor, justo.
              </p>

              <p class="mb-0">
                Cras sagittis. Phasellus nec sem in justo pellentesque
                facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut,
                mi. Donec quam felis, ultricies nec, pellentesque eu, pretium
                quis, sem. Nam at tortor in tellus interdum sagittis.
              </p>
            </v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>
    </div>
    <div class="box d-flex justify-center flex-wrap mb-6">
      <div class="image">
        <v-img
          lazy-src="../../assets/home01.png"
          height="100%"
          width="100%"
          src="../../assets/home01.png"
        ></v-img>
      </div>
      <div class="text d-flex flex-column justify-center align-center">
        <p class="text-h4 text--primary">关于作者</p>
        <p>狐萝卜</p>
        <div class="text--primary">
          喜欢分享黑科技 <br />
          热爱折腾的一个狐萝卜。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data: () => {
    return {
      reveal: false,
    };
  },
};
</script>

<style scoped>
.box {
  width: 100%;
}
.text {
  width: 30%;
  height: 400px;
  align-items: flex-end;
}
.image {
  width: 70%;
  height: 400px;
}

.v-card {
  transition: opacity 0.4s ease-in-out;
}

.v-card:not(.on-hover) {
  opacity: 0.6;
}

.v-card--reveal {
  bottom: 0;
  opacity: 1 !important;
  position: absolute;
  width: 100%;
}

@media only screen and (max-width: 1080px) {
  .text {
    width: 100%;
    height: auto;
    align-items: center;
  }
}
</style>
